<template>
  <div class="activity">
    <div class="activity-top">
      <div class="activity-theme">
        <span class="vertical"></span>
        <h3 class="activity-choice">{{dataList.theme}}</h3>
      </div>
      <div class="activity-keep" v-if="dataList.is_collection" @click="KeepClickEvent">
        <i class="star" :class="{active:dataList.is_collection == 1}"></i>
        <span v-if="dataList.is_collection == 2">收藏</span>
        <span v-else style="color: #f4ea2a">已收藏</span>
      </div>
    </div>
    <img :src="dataList.img_url" @click="clickEvent">
    <div class="activity-attach">
      <p class="activity-name" @click="clickEvent">{{dataList.name}}</p>
      <div class="activity-isJoin" v-if="dataList.is_join == 1">你已参与该活动</div>
    </div>
    <div class="activity-bottom">
      <div class="activity-time">
        <span class="activity-date">
          <i class="data-icon icon-public"></i>
          <span class="release-time">{{date}}</span>
        </span>
        <span class="activity-week">{{week}}</span>
      </div>
      <div class="activity-position" @click="positionClickEvent">
        <i class="position-icon icon-public"></i>
        <span class="address">{{dataList.city + dataList.area}}</span>
      </div>
    </div>
  </div>
</template>
<script>
import QQMapWX from '../utils/qqmap-wx-jssdk.min.js'
export default {
  data(){
    return {
      date:'', //日期
      week:'', //星期几
    }
  },
  props: {
    dataList:{ type: Object, default: {} },
    itemIndex:{ type: String, default: ""},
    callback:{ type: Function, default: ()=>{}},
    keepCallback:{ type: Function, default: ()=>{}},
  },
  mounted(){
    this.filterTime()
  },
  methods:{
    //加工后端返回的开始时间
    filterTime(){
      let arrTime = this.dataList.start_time.split(" ");
      let arrDate = arrTime[0].split("-");
      this.date = `${arrDate[0]}年${arrDate[1]}月${arrDate[2]}日`;
      let day = this.filterDay(new Date(arrTime[0]).getDay());
      this.week = day;
    },
    //转化为中文星期几
    filterDay(day){
      let text = "";
      switch (day){
        case 0:
          text = "星期日";
          break;
        case 1:
          text = "星期一";
          break;
        case 2:
          text = "星期二";
          break;
        case 3:
          text = "星期三";
          break;
        case 4:
          text = "星期四";
          break;
        case 5:
          text = "星期五";
          break;
        case 6:
          text = "星期六";
          break;
      }
      return text
    },
    //触发点击事件把活动和索引通过callback传递出去
    clickEvent(){
      this.callback && this.callback(this.dataList,this.itemIndex);
    },
    //触发点击事件把活动和索引通过callback传递出去
    KeepClickEvent(){
      this.keepCallback && this.keepCallback(this.dataList,this.itemIndex);
    },
    //点击地区定位
    positionClickEvent(){
      //实例化
      var position_map = new QQMapWX({
        key: 'DTYBZ-MNUCV-HQOP3-UD5FF-BLBQT-ATFI2' //开发者key
      })
      //合并地址
      let address = this.dataList.province + this.dataList.city + this.dataList.area + this.dataList.address_detail;
      position_map.geocoder({
        address,
        success: function (res) {
          let latitude = res.result.location.lat;
          let longitude = res.result.location.lng;
          wx.openLocation({
            latitude,
            longitude,
            scale: 18,
            name: address,
          })
        },
        fail: function (res) {
          console.log(res);
        },
      })
    }
  }
};
</script>

<style lang="stylus" scoped>
  .activity
    width 100%
    margin-bottom 20rpx
    background-color #fff
    display flex
    flex-direction column
    justify-content center
    .activity-top
      display flex
      justify-content space-between
      align-items center
      padding 20rpx
      .activity-theme
        display flex
        .vertical
          width 6rpx
          height 28rpx
          background-color black
        .activity-choice
          font-size 29rpx
          margin-left 10rpx
          font-weight 300
          width 520rpx
          overflow:hidden;
          text-overflow:ellipsis;
          white-space:nowrap
      .activity-keep
        font-size 14px
        color #bfbfbf
        display flex
        justify-content center
        align-items center
        .star
          width 50rpx
          height 50rpx
          background-image url(../../static/images/star.png)
          background-repeat no-repeat
          background-position center center
          background-size 50rpx 50rpx
        .active
          background-image url(../../static/images/star_active.png)
    img
      width 100%
      height 450rpx
    .activity-attach
      display flex
      justify-content space-between
      align-items center  
      .activity-name
        padding 20rpx
        font-size 16px
        font-weight 300
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      .activity-isJoin
        font-size 12px
        height 40rpx
        line-height 20rpx
        padding 10rpx
        background-color #ccc
        color #fff
        border-radius 10rpx
        margin-right 20rpx
    .activity-bottom
      width 100%
      display flex
      justify-content space-between
      align-items center
      font-size 12px
      color #b1b1b1
      padding 0 20rpx 20rpx 20rpx
      box-sizing border-box
      .icon-public
        width 28rpx
        height 28rpx
        background-repeat no-replace
        background-size 28rpx 28rpx
        background-position center center
        margin-right 8rpx
      .activity-time
        display flex
        justify-content center
        align-items center
        .activity-date
          display flex
          align-items center
          margin-right 18rpx
          .data-icon
            background-image url(../../static/images/time.png)
      .activity-position
        display flex
        justify-content center
        align-items center
        .position-icon
          background-image url(../../static/images/position.png)
</style>
